<template>
  <div>
    <el-carousel :height="height" :autoplay="autoplay" style="margin-top: 40px">
      <el-carousel-item v-for="(i, k) in list" :key="k">
        <div class="banner-box f f-ac f-jc">
          <img v-slide-plus :src="publicSrc(i[keyImage])" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps<{
  list: Array<Record<string, any>>;
  keyImage: string;
  height: string | number;
  autoplay: boolean;
}>();
</script>
<style lang="scss" scoped>
.banner-box {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    max-height: 100%;
  }
}
// :deep(.el-carousel ul) {
//   left: 0;
//   transform: translateX(0%);
//   position: relative;
//   display: inline-block;
// }
// :deep(.is-active .el-carousel__button) {
//   --interval: 100%;
//   width: 50px;
//   clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
//   width: var(--interval);
//   background: #4580dd;
//   position: absolute;
//   left: 0;
// }
// :deep(.el-carousel__button) {
//   height: 14px;
//   clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
// }
</style>
